import React, { useState } from 'react'
import { Button, Field, Form,Toast  } from 'react-vant';
import { useNavigate }from 'react-router-dom';

interface LOGINTYPE {
    user:string;
    pwd:string;
    code:string
}
function Login() {
    const Navigate = useNavigate();
    const [form] = Form.useForm();
    // const [Code,setCode] = useState('');
    const onFinish = (values:LOGINTYPE) => {
        console.log(values);
        
        if(values.user == '666' && values.pwd == '666'){
            window.localStorage.setItem('token','200');
            Navigate('/');
            Toast('登录成功')
        }else{
            form.setFieldsValue({
                user:'',
                pwd:'',
                code:''
            })
            Toast('登录失败')
        }
    };
    
    return (
        <div className='Login'>
            <Form
                form={form}
                showValidateMessage={false}
                onFinish={onFinish}
                footer={
                    <div style={{ margin: '16px 16px 0' }}>
                        <Button round nativeType="submit" type="primary" block>提交</Button>
                    </div>
                }>
                <Form.Item rules={[{ required: true, message: '请填写用户名' }]} name="user" label="用户名">
                    <Field placeholder="请输入用户名" />
                </Form.Item>
                <Form.Item rules={[{ required: true, message: '请填写密码' }]} name="pwd" label="密码">
                    <Field placeholder="请输入密码" />
                </Form.Item>
                {/* <Form.Item rules={[{ required: true, message: '请填写验证码' }]} name="code" label="验证码">
                    <Field placeholder="请输入验证码" suffix={<Button size="small" type="primary" onClick={()=>{
                        setCode(Math.random().toString().slice(-6));
                        console.log(Code,typeof(Code),'---Code');
                        
                    }}>发送</Button>} />
                </Form.Item> */}
            </Form>
        </div>
    )
}

export default Login